<template>
    <el-dialog v-model="dialogVisible" :title="`${title}保司方案列表`" width="1000px" destroy-on-close :close-on-click-modal="false">
        <div class="flex gap-16px">
            <div class="left flex-2">
                <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
                    v-model:page-info="pageInfo" @pageChange="handlePageChange">
                    <template #solutionType>
                        <el-table-column label="方案类型" prop="solutionType" width="100">
                            <template #default="scope">
                                <span>{{ solutionTypeName(scope.row.solutionType) }}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <template #settings>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
                                <el-button link type="danger" size="small" @click="handleRemove(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </template>
                </tableComponent>
            </div>
            <div class="right flex-1">
                <insurePlan :cur-item="curItem" :cur-plan="curPlan" @success="getList"/>
            </div>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import { cloneDeep } from 'lodash'
import { ElMessage } from 'element-plus'

import uploadImage from '@/components/uploadImage/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import insurePlan from '../insureCompany/insurePlan.vue'

import { getDchemeList, removeScheme } from 'api/insure/longTerm.ts'

import { addAccount, updateAccount } from 'api/tools/manageAccount.ts'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    // 类型: add: 新增   update: 修改
    type: {
        type: String,
        default: 'add'
    },
    // 渠道
    channelId: {
        type: [String, Number]
    },
    curItem: {
        type: Object
    }
})

const emits = defineEmits(['update:show', 'success'])

const dialogVisible = ref(false)

const title = computed(() => {
    return props.curItem.name
})

const submit = () => {

}

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '方案编码',
        prop: 'solutionCode',
    },
    {
        label: '方案名称',
        prop: 'solutionName'
    },
    // {
    //     label: '方案金额',
    //     prop: 'type'
    // },
    {
        label: '方案类型',
        prop: 'solutionType'
    },
    // {
    //     label: '风险等级',
    //     prop: 'picture'
    // },
])

const tableData = ref([])

const curPlan = ref(null)

const handleUpdate = (item) => {
    curPlan.value = item
}

const handleRemove = (item) => {
    ElMessageBox.confirm(
        '是否删除该方案？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            removeScheme(item.id).then(res => {
                ElMessage.success({
                    message: '删除成功'
                })
                getList()
            })
        })
        .catch(() => {
        })
}

const solutionTypeName = computed(() => {
    return (code) => {
        const map = {
            21: '灵活保单',
            22: '月保单',
            23: '即时生效'
        }
        return map[code]
    }
})

const initForm = () => {
    for (const key in formData.value) {
        formData.value[key].value = ''
    }
}

const getList = (code) => {
    getDchemeList({
        code: props.curItem.code,
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize
    }).then(res => {
        pageInfo.value.total = res.total
        tableData.value = res.rows
    })
}

const handlePageChange = () => {
    getList()
}

watch(() => props.show, (newval) => {
    dialogVisible.value = newval
    if (newval && props.type === 'add') {
    }
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
    if (!newval) {
    }
})

watch(() => props.curItem, (newval) => {
    if (newval && Object.keys(newval)?.length) {
        getList()
    }
}, {
    immediate: true,
    deep: true
})

</script>
<style lang="scss" scoped>
.bg-gray {
    background: #fafafc;
}

.table-item {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $borderColor;
    cursor: move;
}

.table-head {
    height: 40px;
    line-height: 40px;
}
.set-height {
    height: 500px;
}
</style>